<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/common_css :: commonHeader('个人信息')">
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-myselt-edit">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">您的姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="您的姓名" name="realName" id="realName" th:value="${editUser.userNameCn }" maxlength="50" />
            </div>
        </div>
        <!--<div class="row cl">-->
            <!--<label class="form-label col-xs-4 col-sm-2">您的昵称：</label>-->
            <!--<div class="formControls col-xs-8 col-sm-9">-->
                <!--<input type="text" class="input-text" placeholder="您的昵称" name="nickName" id="nickName" value="${editUser.nickName }" maxlength="50" />-->
            <!--</div>-->
        <!--</div>-->
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">您的性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <th:block th:if="${editUser.sex == 1}">
                    <div class="radio-box" style="padding-left:0px;">
                        <input type="radio" name="userSex" id="sex-1" value="1" checked="checked"/>
                        <label for="sex-1">男</label>
                    </div>
                    <div class="radio-box" style="padding-left:0px;">
                        <input type="radio" name="userSex" id="sex-2" value="2" />
                        <label for="sex-2">女</label>
                    </div>
                </th:block>

                <th:block th:if="${editUser.sex == 2}">
                    <div class="radio-box" style="padding-left:0px;">
                        <input type="radio" name="userSex" id="sex-1" value="1" />
                        <label for="sex-1">男</label>
                    </div>
                    <div class="radio-box" style="padding-left:0px;">
                        <input type="radio" name="userSex" id="sex-2" value="2" checked="checked"/>
                        <label for="sex-2">女</label>
                    </div>
                </th:block>

            </div>
        </div>
        <!--<div class="row cl">-->
            <!--<label class="form-label col-xs-4 col-sm-2">您的生日：</label>-->
            <!--<div class="formControls col-xs-8 col-sm-9">-->
                <!--<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})" id="birthday"  value='<date:date value="${editUser.birthday }" format="yyyy-MM-dd" />' name="birthday" class="input-text Wdate" placeholder="您的生日" />-->
            <!--</div>-->
        <!--</div>-->

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">用户手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="用户手机" name="telphone" id="telphone" th:value="${editUser.mobile}" maxlength="50" />
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">电子邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="电子邮箱" th:value="${editUser.email }" name="email" id="email" maxlength="255" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">个人说明：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="userDesc" maxlength="200" class="textarea"  placeholder="个人说明...200个字符以内" onKeyUp="javascript:textareaLength(this);"><th:block th:text="${editUser.notes }"></th:block></textarea>
                <p class="textarea-numberbar"><em class="textarea-length"><span id="textareaLengthSpan">0</span></em>/200</p>
            </div>
        </div>
        <div class="row cl">
            <div style="text-align: center;">
                <button class="btn btn-primary radius" type="submit">
                    <i class="Hui-iconfont">&#xe632;</i> 保存
                </button>
                &nbsp;&nbsp;
                <button onClick="layer_close();" class="btn btn-default radius" type="button">
                    &nbsp;&nbsp;取消&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </form>
</article>
<div th:include="admin/common/common_js :: onLoadJS"></div>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript">
    $(function(){
        $("#form-myselt-edit").validate({
            rules:{
                realName:{required:false, minlength:2, maxlength:50},
                nickName:{required:false, minlength:2, maxlength:50},
                email:{required:false, email:true, minlength:5, maxlength:255}
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){

                send(
                    '/pestdiagnosis/sys/user/editMySelf',
                    $('#form-myselt-edit').serialize(),
                    function (data) {
                        if(data.result == 0) {
                            layer.msg(data.message, {icon: 1,time: 1500}, function() {
                                parent.layer.closeAll();
                            });
                        } else {
                            layer.msg(data.message, {icon: 5,time: 1500});
                            $('#realName').focus();
                        }
                    },
                    function (res) {

                    }
                );

            }
        });
    });
    // 计算文本域字符长度
    function textareaLength(obj) {
        $('#textareaLengthSpan').text($(obj).val().length);
    }
</script>
</body>
</html>